<template>
  <scroll-view scroll-y class="detail">
    <!-- 轮播图 -->
    <view>
      <swiper
        indicator-dots
        autoplay
        circular
        class="swiper-head"
      >
        <block v-for="(item,index) in imgUrls.pics" :key="index">
          <swiper-item>
            <image @tap='previewBigImg(item.pics_big)' :src="item.pics_big" class="slide-image" mode='aspectFill'></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 商品详情的一些数据 -->
    <view class="detail_content">
      <!-- 价格 -->
      <view class="detail_price">
        ￥{{imgUrls.goods_price}}
      </view>
      <!-- 产品说明 -->
      <view class="detail_explain">
        <view class="explain-left">{{imgUrls.goods_name}}</view>
        <view class="explain-right">
          <span class="iconfont icon-shoucang"></span>
          收藏
        </view>
      </view>
    </view>
    <!-- 商品详情 -->
    <view class="goods-detail">
      <view class='detail-top'>商品详情</view>
      <!-- 富文本部分 在小程序的api有写 -->
      <view class="detail-content">
        <rich-text type="node" :nodes="imgUrls.goods_introduce"></rich-text>
      </view>
    </view>
    <!-- 底部切换栏 -->
    <view class="goods-tab"> 
      <!-- 客服 -->
      <view class="tab-kefu">
        <span class="iconfont icon-kefu"></span>
        客服
      </view>
      <button class="kefuSpeak" open-type='contact'>加入客服聊天</button>
      <!-- 购物车 -->
      <navigator url='/pages/cart/main' open-type='switchTab' class="tab-cart">
        <span class="iconfont icon-gouwuche"></span>
        购物车
      </navigator>
      <!-- 加入购物车 -->
      <view class="addCart" @tap='addCart(goods_id)'>
        加入购物车
      </view>
      <!-- 立即购买 -->
      <view class="goBuy">
        立即购买
      </view>
    </view>
  </scroll-view>
</template>

<script>
import {goodDetail} from '@/api'
export default {
  data() {
    return {
      goods_id: '',
      //轮播图数据
      imgUrls: []
    }
  },
  onLoad(query) {
    console.log(query)
    this.goods_id = query.goods_id
    //请求商品的详细数据
    goodDetail({goods_id:this.goods_id})
      .then(res=>{
        console.log(res)
        this.imgUrls = res.data.message
        //由于我们的手机不能识别富文本中的？****.webp图片的格式  所以我们在他获取后通过正则去除
        this.imgUrls.goods_introduce = this.imgUrls.goods_introduce.replace(/jpg?.+?webp/g,jap)
    })
  },
  onShow(){

  },
  methods: {
    //点击图片实现预览的效果 微信的api中的媒--图片
    previewBigImg(url){
      //下面的urls 我们需要的是一个数组 且不是相同的url 先将imgUrlS里面的数据转成数组
      let urlArr = []
      this.imgUrls.pics.forEach(item=>{
        // console.log(item)
        urlArr.push(item.pics_big)
      })
      // console.log(urlArr)
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: urlArr // 需要预览的图片http链接列表
      })
    },
    /* 加入购物车 实则是保存在本地 我们的接口文档没有写我们加入购物车的接口
        所以需要我们自己保存在本地 方便在购物车页面获取数据 */
    addCart(id){
      if(!id) return
      let cartObj =wx.getStorageSync('carts') || {}
      //我们选购的商品数量
      this.imgUrls.count = 1
      //我们商品的选中状态
      this.imgUrls.state = true
      //获取我们保存在本地的数据然后进行添加 先判断是不是已经在的数据再决定是加数量还是新增
      if(!cartObj[id]){
        //如果不存在我们就添加新数据
        /* 将我们当前的数据添加到一个对象里面 */
        cartObj[id] = this.imgUrls
      }else{
        cartObj[id].count+=this.imgUrls.count
      }
      //将我们的数据保存到本地
      wx.setStorageSync('carts',cartObj)
      wx.showToast({
        title: '加入成功',
        icon: 'success',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail{
  background-color: #ddd;
  padding-bottom:95rpx;
}
.swiper-head{
  height: 720rpx;
  .slide-image{
    display: block;
    width: 100%;
    height: 100%;
  }
}
.detail_content{
  background-color: #fff;
  padding-left: 20rpx;
  margin-bottom: 20rpx;
  .detail_price{
    color:crimson;
    font-size: 36rpx;
    padding:40rpx 0;
  }
  .detail_explain{
    display: flex;
    .explain-left{
      flex: 1;
      //设置成弹性盒子
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      //文字显示多少行
      -webkit-line-clamp: 2;
      /* 属性规定框的子元素应该被水平或垂直排列。 */
      -webkit-box-orient: vertical;
      font-size: 30rpx;
      border-right:1px solid #bbb; 
      padding-right:70rpx;
    }
    .explain-right{
      width: 140rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #bbb;
      font-size: 28rpx;
    }
  }
}
.goods-detail{
  background-color: #fff;
  //为了解决图片会带来基线影响的几像素产生白缝隙问题 我们可以给图片设置 也可以给父盒子设置font-size:0;
  // vertical-align: top
  font-size: 0;
  .detail-top{
    font-size: 32rpx;
    padding: 10rpx 20rpx ;
  }
}
.goods-tab{
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  height: 95rpx;
  background-color: #fff;
  .kefuSpeak{
    position: absolute;
    width: 20%;
    left: 0;
    top: 0;
    height: 100%;
    opacity: 0;
  }
  .tab-kefu,.tab-cart{
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 24rpx;
  }
  .addCart{
    background-color: rgb(244, 183, 63)
  }
  .addCart,.goBuy{
    width: 30%;
    text-align: center;
    line-height: 95rpx;
    color:#fff;
    font-size: 30rpx;
  }
  .goBuy{
    background-color: brown;
  }
}
</style>



